<template>
  <div class="account_info_main">
    <con-title :topTitle="topTitle">
      <div class="title_tips">
        <p>
          <span class="iconfont">&#xe8c9;</span>
          目前计费功能暂不完善，所以计费功能暂未正式启用
        </p>
        <p>
          <span class="iconfont">&#xe8c9;</span>
          正式收费后，我们将发送通知至首页公告；在此期间，若有欠费情况可联系我们；发送邮件至<a
            href="#"
            >sensecap@seeed.cc</a
          >
        </p>
        <a href="#">点击查看具体收费规则</a>
      </div>
    </con-title>

    <el-card class="box-card con">
      <div slot="header" class="clearfix">
        <span class="iconfont">&#xe8c9;</span><span> 设备概览</span>
      </div>
      <div class="device_info_item">
          <div>计划:</div>
          <div>按量付费</div>
      </div>
      <div class="device_info_item">
          <div>状态:</div>
          <div>正常</div>
      </div>
    </el-card>

    <el-card class="box-card con">
      <div slot="header" class="clearfix">
        <span class="iconfont">&#xe8c9;</span><span> 设备概览</span>
      </div>
      <div class="device_info_item">
          <div>账户余额:</div>
          <div>¥123400.00</div>
      </div>
      <div class="device_info_item">
          <div>充值金额:</div>
          <div><el-input placeholder="请输入充值金额"></el-input></div>
      </div>
      <div class="device_info_item">
          <div>备注:</div>
          <div><el-input placeholder="请输入备注信息"></el-input></div>
      </div>
      <div class="device_info_item">
          <div></div>
          <div><el-button type="primary">充值</el-button></div>
      </div>
    </el-card>

  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";

export default {
  name: "accountInfo",
  components: {
    ConTitle,
  },
  data() {
    return {
      topTitle: {
        type: "计费",
        text: "账户信息",
        msg: "展示当前账户的剩余消息额度，可根据兑换码兑换消息额度。",
      },
    };
  },
};
</script>

<style scoped lang="scss">
.account_info_main::-webkit-scrollbar {
  display: none;
}
.account_info_main {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .title_tips {
    width: 100%;
    padding: 18px 0 0 10px;
    box-sizing: border-box;
    .iconfont {
      color: orange;
      font-size: 20px;
      font-weight: bold;
    }
    p {
      line-height: 25px;
    }
    a {
      color: rgb(0, 162, 255);
      text-decoration: none;
    }
  }

  .con {
    margin: 10px 0;
  }

  .device_info_item{
      width: 50%;
      display: flex;
      margin: 20px 0;
      
      >div:nth-of-type(1){
          width: 150px;
          
          font-weight: bold;
      }
       >div:nth-of-type(2){
          flex: 1 1 auto;
      }
  }
}
</style>